

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>滚动</title>
	<style>
		*{padding: 0;margin:0;}
		div {width: 450px;height: 120px;margin:0 auto;overflow: hidden;position: relative;}
		ul{position: absolute;}
		ul li{float: left;width: 120px;height: 120px;list-style: none;margin-right: 20px;cursor: pointer;}
		ul li img {position: relative;z-index: -10;width: 120px;height: 120px;display: inline-block;}
		.box {position: absolute;z-index: 12;width: 120px;height: 120px;background-color:#000;opacity: 0.7;}
		.box span{display: inline-block;margin-left: 20px;color: #fff;font-size: 18px;line-height: 120px;font-weight: bold;}
		#teacher-list-id ul li div{display: none;}
		#teacher-list-id ul li:hover div{display: block;}
	</style>
</head>
<body>
	<div id="teacher-list-id">
		<ul>
			<li>
				<div class="box"><span>阿狸1111</span></div>
				<img src="images/1.jpg" alt="">
			</li>
			<li>
				<div class="box"><span>阿狸2222</span></div>
				<img src="images/2.jpg" alt="">
			</li>
			<li>
				<div class="box"><span>阿狸3333</span></div>
				<img src="images/3.png" alt="">
			</li>
			<li>
				<div class="box"><span>阿狸4444</span></div>
				<img src="images/4.jpg" alt="">
			</li>
			<li>
				<div class="box"><span>阿狸5555</span></div>
				<img src="images/1.jpg" alt="">
			</li>
		</ul>
	</div>
</body>
<script>
	window.onload = function() {
		var oTlistId = document.getElementById("teacher-list-id");
		var oUl = oTlistId.getElementsByTagName("ul")[0];
		var aLi = oUl.getElementsByTagName("li");

		oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
		oUl.style.width = aLi[0].offsetWidth*aLi.length +"px";
		
		function moveRight(){
			if( oUl.offsetLeft<-oUl.offsetWidth/2 ) {
				oUl.style.left = 0;
			}
			oUl.style.left = oUl.offsetLeft - 2 +"px";
		}

		var timer = setInterval(moveRight, 60);

		for (var i =0 ;i<aLi.length; i++){
			aLi[i].onmouseover = function(){
				clearInterval(timer);
			}
			aLi[i].onmouseout = function(){
				timer = setInterval(moveRight, 60);
			}
		}
	}

</script>
</html>